<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评论列表</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>

</head>
<body class="container">
<br/>
<br/>
<h1 style="font-size: 50px; text-align: center">睡眠管理系统后台</h1>
<br/><br/>

<!--导航栏-->
<div>
    <!--个人信息-->
    <div style=" float:left; width: 50% ">
        <form class="form-horizontal" action="/user/list" method="post">
            <input type="submit" value="用户管理" style="width: 100%" class="btn btn-info"/>
        </form>
    </div>

    <!--论坛-->
    <div style="float:left; width: 50%">
        <form class="form-horizontal" action="/admin/commentList" method="post">
            <input type="submit" value="评论管理" style="width: 100%; background-color: red" class="btn btn-info"/>
        </form>
    </div>
</div>
<br/><br/>
<!--模糊查询 + 睡眠记录按钮 的 js-->
<script>
    $(function () {
        $("#sleepList").click(function () {
            let sType = $("#sType").val();
            let uid = $("#uid").val();
            $.post("/sleep/list",
                {
                    uid: uid
                }
            );
        });
    });
</script>

<br/>
<!--表格内容-->
<div>
    <script src="../../layer/layer.js"></script>
    <!--bootstrapTable表头-->
    <div>
        <table id="comment-table" class="table table-striped table-bordered"></table>
    </div>

    <!--bootstrapTable内容-->
    <script>
        $(function () {

            function getIsFineString(value, row, index) {
                let isFine = row.isFine;
                if (isFine) {
                    return [
                        '<button id="isFine" style="background-color: red; color: whitesmoke" type="button" class="btn btn-default">加精</button>'
                    ].join('');
                } else {
                    return [
                        '<button id="isFine" type="button" class="btn btn-default">普通</button>'
                    ].join('');
                }
            }

            window.isFineEvents = {
                'click #isFine': function (e, value, row, index) {
                    let cid = row.cid;
                    let uid = row.uid;
                    let cContent = row.cContent;
                    let cTargetId = row.cTargetId;
                    let isFine = row.isFine == 0 ? 1 : 0;

                    console.log(cid)
                    console.log(uid)
                    console.log(cContent)
                    console.log(cTargetId)
                    console.log(isFine)

                    $.post("/admin/update-data", {
                        cid: cid,
                        uid: uid,
                        cContent: cContent,
                        cTargetId: cTargetId,
                        isFine: isFine
                    }, function (data) {
                        data = eval("(" + data + ")");
                        layer.msg("<em style='color:red'>" + data.result + "</em>", {icon: 6});
                        $("#comment-table").bootstrapTable('refresh', "/comment/list-data");
                    });
                }
            }

            function addInfoOperateBtn(value, row, index) {
                return [
                    '<button id="info" type="button" class="btn btn-default">详细信息</button>'
                ].join('');
            }


            window.infoEvents = {
                //详情按钮的绑定事件
                'click #info': function (e, value, row, index) {
                    //父话题的cid
                    let cid = row.cid;
                    //用户的uid
                    let uid = $("#uid").val();
                    $(location).attr('href', '/admin/commentInfo?cid=' + cid);
                }
            }

            function addDeleteOperateBtn(value, row, index) {
                return [
                    '<button id="delete" type="button" class="btn btn-default">删除</button>'
                ].join('');
            }


            window.deleteEvents = {
                //删除按钮的绑定事件
                'click #delete': function (e, value, row, index) {
                    let cid = row.cid;
                    layer.confirm("确认要删除吗，删除后不能恢复", {title: "确认删除"}, function (index) {
                        layer.close(index);
                        let windowId = layer.load();
                        $.get("/comment/delete-data", {cid: cid}, function (data) {
                            layer.close(windowId);
                            data = eval("(" + data + ")");
                            layer.msg("<em style='color:red'>" + data.result + "</em>", {icon: 6});
                            $("#comment-table").bootstrapTable('refresh', "/comment/list-data");
                        });
                    });
                }
            };

            $("#comment-table").bootstrapTable({
                url: "/comment/list-data",//数据地址
                striped: true,//是否显示行的间隔
                pageNumber: 1,//初始化加载第几页
                pagination: true,//是否分页
                sidePagination: 'server',
                pageSize: 5,
                pageList: [5, 10, 20],
                showRefresh: true,
                queryParams: function (params) {
                    var temp = {
                        offset: params.offset,
                        limit: params.limit,
                        pageSize: params.pageSize
                    };
                    return temp;
                },
                columns: [
                    {
                        title: "编号",
                        field: "cid",
                        sortable: true
                    },
                    {
                        title: "昵称",
                        field: "nickname",
                        sortable: false
                    },
                    {
                        title: "内容",
                        field: "cContent",
                        sortable: false
                    },
                    {
                        title: "是否加精",
                        field: "isFineString",
                        events: isFineEvents,//给按钮注册事件
                        formatter: getIsFineString//将代号转为文字
                    },
                    {
                        title: "发表时间",
                        field: "cDate",
                        sortable: false
                    },
                    {
                        title: '详情',
                        field: 'info',
                        events: infoEvents,//给按钮注册事件
                        formatter: addInfoOperateBtn//表格中增加按钮
                    }
                ]
            });
        });
    </script>

</div>
</div>
</body>
</html>